<template>
	<view>
		<div
			style="width: 500rpx; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start;">
			<!-- 	    <div style="width: 100%;">
		        <image style="width: 60px; height: 60px; border-radius: 8px;" :src="src" />
		    </div> -->
			<div style="width: 0.8rem;"></div>
			<div
				style=" width:100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;">
				<div
					style=" width:100%;  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;">
					<p
						style="width: 100%; font-size: 16px; font-weight: 500;  color: rgba(33, 33, 33, 1);">
						{{name}}</p>
					<div style="height: 2px;"></div>
					<div style="width:100%; display: flex; flex-direction: row; justify-content: space-between;">
						<div style="width:70%; font-size: 14px; font-weight: 500; line-height: 18px; display: flex;">
							<div style="display: flex;flex-direction: column;color: rgba(0, 122, 255, 1);"><p>现价:</p><p>¥{{price}}</p></div><div style="width: 30px;"></div>
							<div style="display: flex;flex-direction: column;color: rgba(0, 0,0, 0.5);text-decoration: line-through;"><p>原价:</p><p>¥{{oldprice}}</p></div><div style="width: 10px;"></div>
							
						</div>
						<div v-if="num>0">
							<uni-number-box :width="10" @change="changeValue" :value="num" />
						</div>
						
						 <div v-else @tap="click"
							style="width: 110rpx;  padding: 2px 12px 2px 12px; background-color: rgba(0, 122, 255, 1); border-radius: 0.2rem; display: flex; flex-direction: row; align-items: center; justify-content: center;">
							<p
								style="font-size: 13px; font-weight: 500; line-height: 100%; text-align: center; color: rgba(255, 255, 255, 1);">
								点击选购</p>
						</div> 
					</div>

					<!-- <div style="height: 2px;"></div>
		                <p style="width: 100%; font-size: 12px; line-height: 16px; color: rgba(158, 158, 158, 1);">{{detail}}</p> -->
				</div>
				<!-- <div style="width: 8px;"></div> -->
				<!-- <img style="opacity: 0; width: 24px; height: 24px; border-radius: 8px;" src="https://via.placeholder.com/24x24" /> -->
				<div style="height: 10px;"></div>
				<view class="short-line"></view>
			</div>
		</div>
		<div style="height: 1rem;"></div>
	</view>
</template>

<script>
	export default {
		name: "goods-card",
		props: {
			// 检测类型 + 其他验证
			name: {
				type: String,
				default: "商品名称",
				required: false,
			},num: {
				type: Number,
				default: 0,
				required: false,
			},
			id: {
				type: Number,
				
				required: true,
			},
			src: {
				type: String,
				default: "../../static/images/qs_goods.png",
				required: false,
			},
			price: {
				type: Number,
				default: 0,
				required: false,
			},
			oldprice: {
				type: Number,
				default: 0,
				required: false,
			},
			detail: {
				type: String,
				default: "这里是当前商品的介绍",
				required: false,
			},
		},
		data() {
			return {

			};
		},
		methods:{
			click(){
				console.log("点击")
				this.$emit('child-event', this.id)
			},
			changeValue(e) {
						  this.$emit('child-event2',e,this.id)
				this.$emit('update:num', e)
				if (e <= 0) {
					console.log("zizujian")
					this.$emit('child-event-numberchange', this.id);
				}
				
			},
			
			
			
		}
	}
</script>

<style lang="scss">
	.short-line {
		border-top: 1px solid $uni-text-color-disable ;
		/* 1像素的黑色横线 */
		width: 100%;
		height: 0;
		/* 确保线条不占据空间 */
		// margin-top: 0.2rem;
	}
</style>